/**
 * 目标1：完成省市区下拉列表切换
 *  1.1 设置省份下拉菜单数据
 *  1.2 切换省份，设置城市下拉菜单数据，清空地区下拉菜单
 *  1.3 切换城市，设置地区下拉菜单数据
 */
axios({
    url: 'https://hmajax.itheima.net/api/province'
}).then(res => {
    console.log(res);

    const htmlStr = res.data.list.map(item => {
        return `
            <option value="${item}">${item}</option>
        `
    }).join('')

    document.querySelector('.province').innerHTML = '<option value="">省份</option>' + htmlStr

})


document.querySelector('.province').addEventListener('change', async (e) => {
    const province = e.target.value
    const res = await axios({
        url: 'https://hmajax.itheima.net/api/city', params: {
            pname: province
        }
    })
    const htmlStr = res.data.list.map(item => {
        return `
            <option value="${item}">${item}</option>
        `
    }).join('')

    document.querySelector('.city').innerHTML = '<option value="">市</option>' + htmlStr

    document.querySelector('.area').innerHTML = '<option value="">区县</option>'
})


document.querySelector('.city').addEventListener('change', async (e) => {
    const cname = e.target.value
    const res = await axios({
        url: 'https://hmajax.itheima.net/api/area', params: {
            pname: document.querySelector('.province').value,
            cname
        }
    })

    const htmlStr = res.data.list.map(item => {
        return `
            <option value="${item}">${item}</option>
        `
    }).join('')

    document.querySelector('.area').innerHTML = '<option value="">区县</option>' + htmlStr
})



document.querySelector('.submit').addEventListener('click', async () => {
    const form = document.querySelector('.info-form')
    const data = serialize(form, { hash: true, empty: true })

    try {
        const res = await axios({
            url: 'https://hmajax.itheima.net/api/feedback', method: 'POSt', data
        })
        alert(res.data.message)
    } catch (error) {
        alert(error.response.data.message)
    }

})